<template>
	<div style="text-align: center;">
		<div  class="oesbTop10" name="柱状图" id="zhu"></div>
	</div>
</template>

<script>
	"use strict";
	import {selectOesbTop} from '@/api/service.js';
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				myChart: {},
				data: [],
				show:true
			};
		},

		created() {
		},
		
		watch: {
		'getIsCollapse'(val,old){
			
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.myChart.resize(); 
				},450);
				 
			})
		},
		},
		
		computed: {
		 	 ...mapGetters(["getIsCollapse"])
		},
		methods: {
			
			initview(){
							
				let _this = this;
				
				let yData= _this.data.map(v => v.name);
				let color = ['#C1232B', '#ff8800', '#ffc26b'];
				
				let option = {
					grid: {
						top: '0px',
						bottom: '0px',
						right: '30px',
						left: '120px',
						
					},
					yAxis:[
					{
						inverse: true,
						splitLine:{
							show:false
						},
						axisLine: {
							show: false
						},
						type:'category',
						axisTick: {
							show: false
						},
						data:yData,
						axisLabel:{//左对齐
							margin: 120, //字体与柱体间距
							textStyle:{
								align:'left',
							},
						},
					}
					],
					xAxis:{
						show: false,
					},
					series: [
						{
							name: '条',
							type: 'bar',
							data: _this.data,
							barWidth: 3,
							label:{
								show:true,
								position:'right', //数值显示柱体右侧 挨着柱体
								distance:5,
								formatter: function(params) {
									return ~_this.data[params.dataIndex].value;
								},
								textStyle:{
									color:'#8c8c8c',
								},
							},
							
							itemStyle: {
								//颜色渐变
								color: (val) => {
									if (val.dataIndex == 0) {
										return new _this.$echarts.graphic.LinearGradient(1,0,0,0,['rgba(193, 35, 43, 1)','rgba(193, 109, 110, 1.0)'].map((color,offset) =>({color,offset})))
									}else if(val.dataIndex == 1){
										return new _this.$echarts.graphic.LinearGradient(1,0,0,0,['rgba(255, 136, 0, 1)','rgba(252, 229, 146, 1)'].map((color,offset) =>({color,offset})))
									}else if(val.dataIndex == 2 ){
										return new _this.$echarts.graphic.LinearGradient(1,0,0,0,['rgba(255, 194, 107, 1)','rgba(252, 229, 146,1)'].map((color,offset) =>({color,offset})))
									}else{
										return new _this.$echarts.graphic.LinearGradient(1,0,0,0,['rgba(72, 191, 227, 1)','rgba(143, 219, 227, 1)'].map((color,offset) =>({color,offset})))
									}
								},
								barBorderRadius: 30,
							}
							
						},
					],
				
				};
				this.myChart.setOption(option);
			},
			
			
			getList() {
				selectOesbTop().then(response => {
					this.data = response.data.extend;
					this.data.forEach((item)=>{
						item.value = ~item.value;
					})
					this.initview();
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
		},
		
		mounted() {
			this.myChart = this.$echarts.init(document.getElementById("zhu"));
			this.getList();
		}
	}
</script>

<style>
	.oesbTop10 {
		width: calc(100% - 40px );
		height: 309px;
		padding:5px 20px;
		padding-right: 0px;
	}
</style>